<template>
  <view class="page">
		<view class="content">
			<view class="" style="margin-bottom: 50rpx;">
				<view  :style="{top: statusBarHeight+10 +'px'}">
					<u-icon name="close" size="30" @click="navTo"></u-icon>
					<view class="h2 lineH-1 u-p-b-10 u-p-t-40 font-weight-bold">欢迎进入共产星球</view>
					<text class="flex u-m-t-15">绑定手机号</text>
				</view>
			</view>
			<view class="">
				<u-form :model="form" ref="uForm" label-position="top" :labelStyle="{fontSize: '32rpx', fontWeight: 'bold',color: '#333'}">
				  <u-form-item prop="mobile" label="账号">
				    <u-input v-model="form.mobile" type="number" placeholder="请输入手机号码" />
					<!-- ios键盘兼容问题 -->
					<input style="display:none;" type="password">
				  </u-form-item>
				  <u-form-item prop="password" label="密码">
				    <u-input :clearable="false" placeholder="请输入登录密码" v-model="form.password" type="password" />
				  </u-form-item>
					<u-form-item prop="passwordCode" label="验证码">
						<view class="flex flex-1">
							<u-input class="flex-1" v-model="form.captcha" type="number" placeholder="请输入短信验证码" />
							<dy-phone-code-button :mobile="form.mobile" event='register'></dy-phone-code-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="flex flex-column align-center" style="padding-top: 100rpx;">
				<dy-button width="576rpx" size="default" color="#fff" :backgroundColor="'var(--mainColor)'" @click="subBt">立即绑定</dy-button>
			</view>
		</view>
  </view>
</template>

<script>
  import { BaseCenterApi } from "@/api/serves.js"
  import { mapMutations } from 'vuex'
  export default {
    data() {
			return {
				loginPwd: true,
				form: {
					mobile: '',
					password: '',
					captcha: ''
				},
				loading: false,
				checked: false,
				rules: {
					mobile: [
						{required: true,message: '请输入手机号码',	trigger: ['blur'],},
						{
						  validator: (rule, value, callback) => {
						    if (this.$u.test.mobile(value)) {
						      callback();
						    } else {
						      callback(new Error("请输入正确的手机号码"));
						    }
						  },
						},
					],
					captcha: [{
						len: 6,
						required: true,
						message: '请输入6位数验证码',
						trigger: ['blur', 'change'],
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'change',
						trigger: ['blur'],
					}],
				}
			};
		},
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      ...mapMutations({
        SET_USER_INFO: 'user/SET_USER_INFO',
        SET_USER_TOKEN: 'user/SET_USER_TOKEN',
      }),
      navTo() {
        uni.navigateBack()
      },
      subBt() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            BaseCenterApi.wechaBindMobile(this.form).then(res => {
              console.log(res);
            	uni.hideLoading()
            	this.$u.toast(res.msg, 1500)
              if (res.code == 1) {
                this.SET_USER_INFO(res.data)
                this.SET_USER_TOKEN(res.data.token)
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/tabbar/index/index",
                  });
                }, 1500);
              }
            })
          }
        });
      },
    },
  }
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #FFFFFF;
}
.content {
	padding: 120rpx 74rpx 0;
}
</style>
